<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/static/css/element-ui.css">
    <link rel="stylesheet"
      href="/static/css/highlight.min.css">
    <script src="/static/js/highlight.min.js"></script>
  </head>
  <body>
    <!--<div>https://shockerli.net/post/golang-pkg-http-file-server/</div>-->
    <div id="app" style="width: 60%;height: 100%;margin: 30px 20%;">
      <el-container>
        <el-header>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a :href="'/history?workflow_id='+workflow_detail.id">${workflow_detail.name}</a></el-breadcrumb-item>
            <el-breadcrumb-item>${history_detail.num}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <div>
              <h4>原始数据</h4>
              <pre><code class="json">${raw}</code></pre>
              <h4>输入参数</h4>
              <pre><code class="json">${inputParams}</code></pre>
            </div>
            <el-collapse v-model="active_names" @change="handleChange">
                <el-collapse-item v-for="node in history_detail.nodes" :title="nodeTitle(node)" :key="node.id">
                  <div>
                    <h4>标准输出</h4>
                    <pre><code class="bash">${node.stdout}</code></pre>
                  </div>
                  <div>
                    <h4>标准错误输出</h4>
                    <pre><code class="bash">${node.stderr}</code></pre>
                  </div>
                </el-collapse-item>
        </el-main>
      </el-container>
    </div>

    <script type="text/javascript" src="/static/js/vue.js"></script>
    <script type="text/javascript" src="/static/js/element-ui.js"></script>
    <script type="text/javascript" src="/static/js/axios.min.js"></script>
    <script type="text/javascript" src="/static/js/libs.js"></script>

    <script>
      var app = new Vue({
        delimiters: ['${', '}'],
        el: "#app",
        data: function(){
          return {
            active_names: [],
            workflow_detail: {},
            history_detail: {},
            workflow_id: {{.workflow_id}},
            history_id: {{.history_id}},
          }
        },
        created: function(){
          this.fetchWorkflow()
          this.fetchHistoryDetail()
        },
        computed: {
          raw() {
            if(this.history_detail.trigger == undefined) {
              return ''
            }else{
              return this.history_detail.trigger.raw
            }
          },
          inputParams() {
            if(this.history_detail.trigger == undefined) {
              return ''
            }else{
              return this.history_detail.trigger.input_params
            }
          }
        },
        methods: {
          nodeTitle(node) {
            let status = '';
            switch(node.status) {
              case "NotCreated":
                status = '未创建'
                break
              case "Finished":
                status = '已完成'
                break
              default:
                status = '未知状态(' + node.status+ ')'
                break
            }
            return node.step + " : " + node.name + " " + status
          },
          handleChange(val) {
            console.log(val)
          },
          fetchWorkflow(id) {
            axios.get("/api/workflow?id="+this.workflow_id).then(res => {
              this.workflow_detail = res.data
            }, err => {
              console.log(err)
            })
          },
          fetchHistoryDetail() {
            axios.get("/api/detail?id="+this.history_id).then(res => {
              this.history_detail = res.data
            }, err => {
              console.log(err)
            })
          }
        }
      })
    </script>

  </body>
</html>